<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <script src="https://unpkg.com/vue@3.4.32/dist/vue.global.js"></script>
</head>
<body>
<!--
      v-model  双向绑定
         v-model 绑定1      view  页面        model 内存数据  (页面变化 数据变化)
         v-model 绑定2       model 内存数据    view 页面      (数据变化 页面变化)
-->

<div id="app">
    <!--所谓的双向绑定就是，你变我也变，我变你也变-->
   页面的变化: <p><input type="text" v-model="msg"></p>
   模拟修改内存数据: <p><input type="text" v-model="msg"></p>

    <!-- 这里只是展示 msg的数据 -->
    内存数据变化:<p><input type="text" :value="msg"></p>
</div>
<script>
    const {createApp, ref} = Vue;
    const app = createApp({
        setup(){
            const msg = ref('中彩票500w');
            return {
                msg
            };
        }
    })
    app.mount('#app')
</script>

</body>
</html>